<template>
  <div id="trainingUserList">
    <Splitpanes class="area">
      <Pane size="30">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-button type="text" icon="vxe-icon-refresh" class="button-blue" content="刷新" @click="getUserList" :loading="showPeopleLoading"></vxe-button>
          </template>
        </vxe-toolbar>
        <div class="trainingBox">
          <vxe-table ref="trainingUserTableRef" :loading="showPeopleLoading" class="mytable-scrollbar" @current-change="currentChangeEvent" border align="left" height="auto" :keep-source="true" :data="userList" :row-config="{ isCurrent: true, isHover: true }" resizable show-overflow>
            <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
            <vxe-column field="username" title="用户名"></vxe-column>
            <vxe-column field="realname" title="名称"> </vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="70">
        <vxe-table ref="trainingTableRef" :loading="showTrainLoading" class="mytable-scrollbar" border align="left" height="auto" :keep-source="true" :data="trainingList" :row-config="{ isCurrent: true, isHover: true }" resizable show-overflow>
          <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
          <vxe-column field="trainingName" title="培训主题">
            <template #default="{ row }">
              <router-link :to="{ path: '/trainingview', query: { param1: row.id, param2: 'secondTab' } }">
                <a href="">{{ row.trainingName }}</a>
              </router-link>
            </template>
          </vxe-column>
          <vxe-column field="trainingDate" title="培训时间"></vxe-column>
          <vxe-column field="address" title="培训地点"> </vxe-column>
          <vxe-column field="endDate" title="培训结束时间"> </vxe-column>
          <vxe-column field="trainingType" title="培训方式" :formatter="formatterType"> </vxe-column>
        </vxe-table>
      </Pane>
    </Splitpanes>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';

let { proxy }: any = getCurrentInstance();
let showPeopleLoading = ref(false); //左侧人员加载状态
let showTrainLoading = ref(false); //右侧培训项目加载状态

const userList = reactive([]); //左侧人员数据
const trainingList = reactive([]); //右侧培训数据

const typeOptions = reactive([
  {
    name: '线下培训',
    value: 0
  },
  {
    name: '线上培训',
    value: 1
  }
]);

// 方法定义区 =============================================================
onMounted(() => {
  getUserList(); //获取左侧人员列表
});

// 获取左侧人员列表
function getUserList() {
  showPeopleLoading.value = true;
  userList.length = 0;
  const url = '/api/user/getUserInfoList';
  proxy.$http
    .get(url, {})
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        userList.push(...res.data);
        currentChangeEvent({ row: userList[0] });
        const $xTable = proxy.$refs.trainingUserTableRef as any;
        if ($xTable) {
          $xTable.setCurrentRow(userList[0]);
        }
      }
      showPeopleLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showPeopleLoading.value = false;
    });
}

// 获取右侧列表信息
function getTrainingList(row: any) {
  showTrainLoading.value = true;
  trainingList.length = 0;
  const url = '/wk/training/plan/getTrainingListByUserId/' + row.id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        trainingList.push(...res.data);
        const $xTable = proxy.$refs.trainingTableRef as any;
        if ($xTable) {
          $xTable.setCurrentRow(trainingList[0]);
        }
      }
      showTrainLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showTrainLoading.value = false;
    });
}

// 左侧点击人员信息当前行
function currentChangeEvent(row: any) {
  getTrainingList(row.row);
}

// 格式化培训方式 根据数值返回名字
function formatterType({ cellValue }) {
  const item = typeOptions.find((item) => item.value === cellValue);
  return item ? item.name : '';
}
</script>

<style lang="scss" scoped>
#trainingUserList {
  height: 100%;
  .area {
    background-color: $base-white;
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
    .trainingBox {
      height: calc(100% - 40px);
    }
  }
}
</style>
